<div class="content">
    <div id="example_title">
        <h1>Context Menu</h1>
        Right click for context menu. Optionally you can have different menu items for each node.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
<div style="margin-left: 220px;">
    <span style="color: gray">
        Right click for the context menu
        <br>
        For item custom menu right click on "home" or "coffee"
    </span>
</div>
<div style="clear: both"/>

<!--CODE-->
<script type="module">
import { w2sidebar, query, w2utils } from '__W2UI_PATH__'

let sidebar = new w2sidebar({
    box: '#sidebar',
    name : 'sidebar',
    nodes: [
        { id: 'level-1', text: 'General', img: 'icon-folder', expanded: true, group: true, groupShowHide: false,
            nodes: [
                { id: 'level-1-1', text: 'Home', icon: 'fa fa-home' },
                { id: 'level-1-2', text: 'Coffee', icon: 'fa fa-coffee', count: 5 },
                { id: 'level-1-3', text: 'Comment', icon: 'fa fa-comment-o' }
            ]
        },
        { id: 'level-2', text: 'Level 2', img: 'icon-folder', group: true, expanded: true,
            nodes: [
                { id: 'level-2-1', text: 'Level 2.1', icon: 'fa fa-star-o' },
                { id: 'level-2-2', text: 'Level 2.2', icon: 'fa fa-star-o' },
                { id: 'level-2-3', text: 'Level 2.3', icon: 'fa fa-star-o' }
            ]
        }
    ],
    menu: [
        { id: 'cut', text: 'Cut', icon: 'w2ui-icon-empty', hotkey: '⌘X' },
        { id: 'copy', text: 'Copy', icon: 'w2ui-icon-empty', hotkey: '⌘C' },
        { id: 'paste', text: 'Paste', icon: 'w2ui-icon-empty', hotkey: '⌘V' },
        { text: '--' },
        { id: 'delete', text: 'Delete', icon: 'w2ui-icon-cross', hotkey: 'del' }
    ],
    onContextMenu(event) {
        // you can cencel menu
        // event.preventDefault()

        // remember original menu
        if (this._menu == null) {
            this._menu = this.menu
        }
        if (event.target == 'level-1-1') {
            this.menu = [
                { id: 'more1', text: 'Home Item 1', icon: 'w2ui-icon-empty' },
                { id: 'more2', text: 'Home Item 2', icon: 'w2ui-icon-empty' }
            ]
        } else if (event.target == 'level-1-2') {
            this.menu = [
                { id: 'more0', text: 'Regular', icon: 'w2ui-icon-empty' },
                { id: 'more1', text: 'Cold Brew', icon: 'fa fa-star' },
                { id: 'more2', text: 'Iced Coffee', icon: 'fa fa-star-o' },
                { id: 'more3', text: 'Espresso', icon: 'fa fa-coffee' }
            ]
        } else {
            this.menu = this._menu
        }
    },
    onMenuClick(event) {
        w2utils.notify(`Selected "${event.detail.menuItem.text}"`)
    }
})

window.goFlat = function () {
    sidebar.goFlat()
}
</script>